<template>
	<view class="page">
		<view class="flex box">
			<view>姓名<text style="color: red;">*</text></view>
			<u--input v-model="name" type="name" placeholder="请输入姓名"></u--input>
		</view>
		<view class="flex box">
			<view>手机号<text style="color: red;">*</text></view>
			<u--input v-model="phone" type="number" placeholder="请输入手机号"></u--input>
		</view>
		<view class="flex box">
			<view>货物描述<text style="color: red;">*</text></view>
			<u--textarea v-model="content" count placeholder="请输入货物描述"></u--textarea>
		</view>
		<view class="flex box">
			<view>相关图片<text style="color: #fff;">*</text></view>
		</view>
		<view class="addbox">
			<view class="img">
				<view v-for="(item, i) in tempFilePaths" :key="i" style="position: relative">
					<image :class="[(i + 1) % 4 === 0 ? 'noMargin' : '']" :src="item" @click="previewImage(i)" mode=""></image>
					<image :class="[(i + 1) % 4 === 0 ? 'noMargindel' : '']" class="del" src="@/static/images/del.png" mode="" @click="delImg(i)"></image>
				</view>
				<view class="upload" @click="upload"><text>{{tempFilePaths.length}}/5</text></view>
			</view>
		</view>

		<view @click="submit" class="m-t-100 bold">
			<u-button shape="circle" size="large" type="primary" text="提交"></u-button>
		</view>
	</view>
</template>

<script>
const app = getApp();
import { uploadFile } from '@/utils/tools';
import config from '@/config/index.js';
const imgUrl = config.imgUrl;
export default {
	data() {
		return {
			name: '',
			phone: '',
			content: '',
			img1: '',
			tempFilePaths:[]
		};
	},
	methods: {
		// 上传
		upload() {
			var that = this;
			uni.chooseImage({
				count: 5, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: function (res) {
					let list = [];
					let count = 0;
					let files = res.tempFilePaths;
					uni.showLoading();
					files.forEach((item) => {
						uploadFile(item, {
							// #ifdef MP-WEIXIN
							header: {
								'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
							}
							// #endif
						})
							.then((res) => {
								uni.hideLoading();
								count++;
								//如果是最后一张,则隐藏等待中
								if (count == files.length) {
									wx.hideLoading();
								}
								list.push(res.uri); //待上传图片临时路径
								that.tempFilePaths = list;
							})
							.catch(() => {
								uni.hideLoading();
								uni.showToast({
									title: '上传失败,请重新上传!',
									icon: 'none'
								});
							});
					});
				}
			});
		},
		// 删除
		delImg(i) {
			this.tempFilePaths.splice(i, 1);
		},
		// 预览
		previewImage: function (index) {
			let imgs = [];
			for (let i = 0; i < this.tempFilePaths.length; i++) {
				let str = this.tempFilePaths[i];
				imgs.push(str);
			}
			uni.previewImage({
				current: index, //预览图片的下标
				urls: imgs //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			});
		},
		async submit() {
			if (!this.name)
				return this.$toast({
					title: '请输入姓名'
				});
			
			if (!/^1[3456789]\d{9}$/.test(this.phone)) {
				this.$toast({
					title: '手机号格式不正确!'
				});
				return;
			}
			if (!this.content)
				return this.$toast({
					title: '请输入货物描述'
				});
			
			let imgs = [];
			if(this.tempFilePaths.length>0){
				this.tempFilePaths.forEach((item) => {
					imgs.push(item.split(imgUrl)[1])
				})
			}
			let res = await this.$api.add_goods({
				name: this.name,
				phone: this.phone,
				content: this.content,
				images: imgs.toString()
			});
			if (res.code == 1) {
				this.$toast({
					title: '操作成功',
					icon: 1
				});
				setTimeout(function () {
					uni.navigateBack();
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding: 10rpx 25rpx;

	.box {
		position: relative;
		margin: 35rpx 0;

		view:first-child {
			font-size: 28rpx;
			font-weight: bold;
			margin-right: 36rpx;
			width: 140rpx;
			text-align: right;
		}

		image {
			width: 160rpx;
			height: 160rpx;
		}
	}
	
	.addbox {
		position: relative;
		
		.img {
			display: flex;
			flex-wrap: wrap;
			background: #fff;
			padding:20rpx 30rpx 0 30rpx;
			border-radius: 25rpx;
			.del {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: -20rpx;
				right: -20rpx;
			}
		}
		
		image {
			width: 140rpx;
			height: 140rpx;
			margin-bottom: 20rpx;
			margin-right: 26rpx;
		}
		
		.noMargin {
			margin-right: 0rpx;
		}
		
		.noMargindel {
			top: -20rpx !important;
			right: -44rpx !important;
		}
		
		.upload {
			width: 140rpx;
			height: 140rpx;
			background: url(@/static/images/add.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 20rpx;
			position: relative;
			
			text{
				position: absolute;
				right: 9rpx;
				bottom: 9rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #CBCBCB;
			}
		}
	}
}
</style>
